<template>
  <view>
    <u-navbar title="我的医生" back-icon-size="34" title-size="36" :border-bottom="false" :background="background" title-color="#222" back-icon-color="#222"></u-navbar>
    <!-- <scroll-view :scroll-top="scrollTop" scroll-x="true" class="scroll-Y"
			style="white-space: nowrap;background: #fff;">
			<view class=""
				style="display: flex;align-items: center;background: #fff;height: 170rpx;margin-left: 36rpx;">
				<view :class="current1==k ? 'on1' : 'on'" v-for="(i,k) in list1" :key="k" style="margin-right: 30rpx;"
					@tap="current1=k,mydoctor(1)">
					<view class="" style="font-size: 28rpx;">
						{{i.patient_name}}
					</view>
					<view class="" style="font-size: 24rpx;">
						{{i.patient_gender_text}} · {{i.patient_age}}岁
					</view>
				</view>
			</view>
		</scroll-view> -->
    <view class="" slot="">
      <u-tabs :list="list" :is-scroll="false" :current="current" @change="change" :show-bar="false" active-color="#1A9EFF" inactive-color="#222222"></u-tabs>
    </view>
    <scroll-view scroll-y="true" id="box" :style="{ height: boxHeight + 'px' }" @scrolltolower="mydoctor">
      <view class="" style="margin: 28rpx; background: #fff; border-radius: 20rpx" v-for="(i, k) in doctorlist" :key="k" @tap="joop(i.doctor_id)">
        <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 44rpx 0 44rpx 5rpx">
          <view class="" style="display: flex; align-items: center; padding-left: 30rpx">
            <image :src="i.doctor_avatar" mode="aspectFill" style="width: 112rpx; height: 112rpx; border: 2rpx solid #ffffff; border-radius: 50%"></image>
            <view class="" style="padding-left: 25rpx">
              <view class="">
                <text style="font-size: 32rpx; font-weight: bold">{{ i.doctor_name }}</text>
                <text style="font-size: 26rpx; padding-left: 15rpx">{{ i.doctor_title }}</text>
              </view>

              <view class="">
                <text style="font-size: 26rpx; color: #666666">{{ i.department_name }}</text>
                <text style="font-size: 26rpx; color: #666666; padding-left: 24rpx">{{ i.hospital_name }}</text>
              </view>
            </view>
          </view>
        </view>
        <!-- 问诊 购药 -->
        <view class="" style="display: flex; align-items: center; padding-bottom: 33rpx">
          <view class="" style="display: flex; align-items: center; padding-left: 37rpx">
            <image src="https://wenzhen.fuerle168.com/static/index/wz.png" mode="" style="width: 31rpx; height: 31rpx"></image>
            <view class="" style="font-size: 26rpx; padding-left: 11rpx">问诊 {{ i.nums_one }}次</view>
          </view>
          <view class="" style="display: flex; align-items: center; padding-left: 43rpx">
            <image src="https://wenzhen.fuerle168.com/static/user/yao.png" mode="" style="width: 32rpx; height: 32rpx"></image>
            <view class="" style="font-size: 26rpx; padding-left: 11rpx">购药 {{ i.nums_two }}次</view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      background: {
        background: '#fff'
      },
      list: [
        {
          name: '问诊医生'
        },
        {
          name: '收藏医生'
        }
      ],
      current: 0,
      page: 1,
      doctorlist: [],
      scrollTop: 0,
      list1: [],
      current1: 0,
      boxHeight: ''
    };
  },
  //方法
  methods: {
    box() {
      const query = uni.createSelectorQuery().in(this);
      query
        .select('#box')
        .boundingClientRect((data) => {
          this.boxHeight = this.screenHeight - data.top - 50;
        })
        .exec();
    },
    oss() {
      this.api({
        url: '/api/index/patientList',
        method: 'post'
      }).then((res) => {
        this.list1 = res.data;
        this.mydoctor(1);
      });
    },
    change(index) {
      this.current = index;
      this.page = 1;
      this.doctorlist = [];
      this.mydoctor(1);
    },
    mydoctor(e) {
      if (e == 1) {
        this.doctorlist = [];
        this.page = 1;
      }
      this.api({
        url: '/api/index/myDoctorList',
        method: 'post',
        data: {
          page: this.page,
          type: this.current == 0 ? 1 : 2
          // patient_id: this.list1[this.current1].patient_id
        }
      }).then((res) => {
        this.doctorlist = this.doctorlist.concat(res.data);
        this.page++;
      });
    },
    joop(e) {
      uni.navigateTo({
        url: '/doctor/doctor/doctor?id=' + e
      });
    }
  },
  //首页渲染
  onLoad(options) {},
  //监听
  watch: {},
  //计算属性
  computed: {},
  onShow() {
    this.box();
    this.oss();
  }
};
</script>

<style lang="scss" scoped>
page {
  background: #f8f8f8;
}
.on {
  padding: 21rpx 53rpx 15rpx 25rpx;
  background: #f0f0f0;
  border-radius: 20rpx;
}
.on1 {
  padding: 21rpx 53rpx 15rpx 25rpx;
  background: linear-gradient(0deg, #1a9eff 0%, #0fb8ff 100%);
  border-radius: 20rpx;
  color: #fff;
}
</style>
